import { useEffect, useState, FC } from 'react'
import { getGoodsListByStoreid, delGoodsByStoreid, getUseridStoreInfo } from '@/request/store'
import { useNavigate } from 'react-router-dom'
import { Space, Table, Popconfirm, message, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
const Index: FC = () => {
    const columns: ColumnsType<any> = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '商品标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: 'brand',
        },
        {
            title: '产地',
            dataIndex: 'producer',
            key: 'producer',
        },
        {
            title: '类型',
            dataIndex: 'type_name',
            key: 'type_name',
        },
        {
            title: '品种',
            dataIndex: 'breed_name',
            key: 'breed_name',
        },
        {
            title: '规格',
            dataIndex: 'specifications',
            key: 'specifications',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record)}>
                        <a>删除</a>
                    </Popconfirm>
                    <a onClick={() => { edit(record) }}>编辑</a>
                </Space>
            ),
        },
    ];
    //获取商品列表
    const [goods, setGoods]: any = useState([])
    const [options, setOptions]: any = useState([])
    const [values, setValue]: any = useState(null)
    const navigate = useNavigate()
    const getGoodsList = async (id: number | string) => {
        const res = await getGoodsListByStoreid({
            store_id: id
        })
        setGoods(res.data)
    }
    const getUseridStore = async () => {
        const res = await getUseridStoreInfo()
        setOptions(res.data)
        if (res.data.length) {
            setValue(res.data[0].id)
            getGoodsList(res.data[0].id)
        }
    }
    const handleDelete = async (record: any) => {
        const res = await delGoodsByStoreid({
            id: record.id
        })
        if (res.status === 200) {
            message.success('删除成功')
            getGoodsList(values)
        }
    }
    const edit = (record: any) => {
        delete record.type_name
        delete record.breed_name
        navigate('/home/store/pub', {
            state: record
        })
    }
    const handleChange = (value: string) => {
        setValue(value)
        getGoodsList(value)
    }
    useEffect(() => {
        getUseridStore()
    }, [])
    return (
        <div>
            <Select
                value={values}
                style={{ width: 120 }}
                onChange={handleChange}
                options={options}
                fieldNames={{
                    label: 'store_name',
                    value: 'id'
                }}
            />
            <Table columns={columns} dataSource={goods} />
        </div>
    )
}
export default Index
